<template>
  <div class="wrapper">
    <minbar title="修改密码" :isPadding="true"></minbar>
    <!-- 验证码层 -->
    <div class="content-div">
      <div class="x-content">
        <!-- 新密码 -->
        <div class="x-vercode-div" >
          <div class="x-vercode-left">
            <input type="password"  ref="vecode" class="x-input" placeholder="请输入新密码" v-model="userpass" @input="passinput" /> 
          </div>
        </div>
        <!-- 验证码 -->
        <div class="x-vercode-div">
          <div class="x-vercode-left">
            <input type="text"  ref="vecode" class="x-input" placeholder="请输入验证码" v-model="vercode" @input="vercodeinput" /> 
          </div>
          <div class="x-vercode-send">
            <button 
              :text="verBtnText" 
              :btnStyle="{width:220,height:80}" 
              :disabled="verbtnDisabled" 
              @buttonClick="sendVerCode"></button>
          </div>
        </div>
        <!-- 提醒的字 -->
        <text class="x-ts-text">选择发送短信验证或者语音验证码</text>
        <!-- 确定按钮 -->
        <div>
          <button text="确定" 
          :btnStyle="{width:600,marginTop:100}" 
          @buttonClick="okBtn"></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
const navigator = weex.requireModule('navigator');
export default { 
  components: {
    "button": require("../../../common/component/button.vue"),
    "minbar" : require("../../../common/component/minbar.vue"),
  },
  data() {
    return {
      verbtnDisabled:false,
      verBtnText:"发送验证码",
      username:"",
      userpass:"",  //输入的新密码
      vercode:"",   //输入的验证码
      code_sn:"",   //验证码编码
    };
  },
  created(){
    asCore.getContext(context =>{
      this.username = context.mobile;
    });
  },
  methods: {
    vercodeinput(event){
      this.vercode = event.value;
    },
    passinput(event){
      this.userpass = event.value;
    },
    /* 表单验证 */
    isOk(){
      if(!this.userpass){
        asCore.toast("请输入新密码");
        return false;
      }
      if(!this.vercode){
        asCore.toast("请输入验证码");
        return false;
      }
      return true;
    },
    /* 确定逻辑 */
    okBtn() {
      var _this = this;
      if(!_this.isOk()) return;
      var options = {
        password:_this.userpass,
        code:_this.vercode,
        code_sn:_this.code_sn
      };
      asCore.post("/member/passwd",options,(data,msg,flag)=>{
          if(flag==true){
            asCore.toast("密码修改成功");
            navigator.back();
          }else{
            asCore.toast(msg);
          }
      });
      
    },
    /* 发送验证码 */
    sendVerCode() {
      var _this = this;
      if(!_this.username){
        asCore.toast("获取手机号码错误");
        return;
      }
      _this.verbtnDisabled = true;
      _this.verBtnText = "发送中..";
      asCore.post("/sms/send",{type:"forget_pwd",mobile:_this.username},(data,msg,flag)=>{
        if(flag){
          _this.code_sn = data;
          var time = 60;
          var t = setInterval(() => {
            time--;
            _this.verBtnText = "已发送("+time+")";
            if(time<1){
              _this.verBtnText = "发送验证码";
              _this.verbtnDisabled = false;
              clearInterval(t);
            }
          }, 1000);
        }else{
          asCore.toast("验证码发送错误");
          _this.verBtnText = "发送验证码";
          _this.verbtnDisabled = false;
        }
      });
    },
  }
};
</script>
<style scoped>
  .iconfont {
    font-family:iconfont;
  }
  .x-center{
    align-items: center;
    justify-content: center;
  }
  .content-div {
    align-items: center;
  }
  .x-content {
    width: 600px;
    padding-top:100px;
  }
  .x-vercode-div {
    height:80px;
    width: 600px;
    flex-direction: row;
    margin-top:50px;
  } 
  .x-vercode-left {
    border-bottom-color: #e0e0e2;
    border-bottom-width: 1px;
    flex: 1;
  }
  .x-input {
    height: 80px;
    font-size: 33px;
    padding-bottom: 15px;
    flex: 1;
  }
  .x-ts-text {
    color: #887147;
    font-size:25px;
    margin-top:40px;
  }
</style>
